<template>
  <div>
    <div class="list-area">
      <div class="setting-area glo-content-area">
        <div class="btns glo-btn-group">
          <!-- 同步离线记录按钮 -->
          <!-- <Button
            type="primary"
            @click="handleupOffline"
            v-show="allPermissions.devOfflineHint"
          >{{$t('devicesIndex.devOfflineHint')}}</Button> -->

          <Button
            type="primary"
            @click="handleUpgradeaMulti"
            v-show="allPermissions.devUpgradeBtn"
          >{{ $t("devicesIndex.devUpgradeBtn") }}</Button>
          <!-- <Button
            type="primary"
            @click="handleBindAreaMulti"
            v-show="allPermissions.devBingBtn"
          >{{ $t("devicesIndex.devBingBtn") }}</Button> -->
          <!-- 新增设备按钮 -->
          <!-- <Button
            type="primary"
            @click="showCreate"
          >{{ $t("devicesIndex.devAddEquipmentBtn") }}</Button> -->
        </div>
        <div class="title">{{ $t("devicesIndex.devEquipmentName") }}</div>
      </div>

      <div class="glo-search-area">
        <div class="widget-item glo-clear-after">
          <div class="widget-label">{{ $t("devicesIndex.devNumberName")}}：</div>
          <!-- 要搜索的设备序列号 -->
          <Input
            v-model="sn"

            :placeholder="$t('devicesIndex.devNumberHint')"
            search
            :enter-button="$t('devicesIndex.devNumberBtn')"
            @on-search="$_page_update"
          />
        </div>
        <div class="widget-item glo-clear-after">
          <div class="widget-label">{{ $t("devicesIndex.devName") }}：</div>
          <!-- 要检索的设备名称 -->
          <Input
            v-model="name"
            :placeholder="$t('devicesIndex.devNameHint')"
            search
            :enter-button="$t('devicesIndex.devNumberBtn')"
            @on-search="$_page_update"
          />
        </div>
      </div>

      <div class="glo-selection">
        <Alert show-icon>
          {{ $t("devicesIndex.devSelected") }} {{ selection.length }} {{ $t("devicesIndex.devItem") }}
          <a class="glo-selection-clean" @click="handleSelectionAllStatus(false)">{{ $t("devicesIndex.devEmpty") }}</a>
        </Alert>
      </div>
      <Table
        ref="table"
        class="list"
        :data="list"
        :columns="columns"
        @on-selection-change="handleSelection"
      />
      <Page
        class="glo-content-area glo-pagenation"
        :total="total"
        :pageSize="pageSize"
        show-sizer
        :current="page"
        show-total
        @on-change="$_page_pageChange"
        @on-page-size-change="$_page_pageSizeChange"
      />
    </div>

    <Create
      v-if="ifCreate"
      @close="closeCreate"
    />
    <Create
      v-if="ifUpdate"
      edit-type="update"
      :edit-item="editItem"
      @close="closeUpdate"
    />
    <Create2
      v-if="ifD2Update"
      edit-type="update"
      :edit-item="editItem"
      @close="closeUpdate"
    />
    <AreaSelect
      v-if="ifSelectArea"
      :as-cb="areaSelectCallback"
      @close="closeAreaSelect"
    />


    <Modal
        class="modalClass"
        v-model="modalZone"
        width = 600
        :title="$t('devicesCreate.devTimezones')"
        >
        <Form  ref="formItem" :label-width="80">
          <FormItem prop="timezones" :label="$t('devicesCreate.devTimezones')">
            <Select
              style="width:400px"
              v-model="timezone"
              :placeholder="$t('devicesCreate.devTimezonessEL')"
            >
              <Option
                v-for="(item, idx) in timezones" :key="idx"
                :value="item.value"
                :label="item.name"
              >
              </Option>
            </Select>
          </FormItem>
          <FormItem style="margin-top: 120px;">
            <i-button class="submit" type="primary"  @click="handleSubmitZone()">{{ $t("devicesCreate.devCreateSubmit")}}</i-button>
          </FormItem>
        </Form>
        <div slot="footer"></div>
    </Modal>

    <Modal
        v-model="modalSel"
         :title="$t('devicesIndex.devOfflineHint')"
        >
          <div style="width:80%;margin:auto; font-size:16px">
            <div style="line-height:40px">{{ $t("devicesIndex.devOfflineAccessIsInfo") }}</div>

            <RadioGroup
              v-model="sex"
              style=" font-size:16px"
            >
              
              <span>{{ $t("devicesIndex.devOfflineAccessIs") }}</span>
              <Radio
               style=" font-size:16px"
                v-for="(item, idx) in sexs" :key="idx"
                :label="item.value"
              >{{ item.name }}</Radio>
            

            </RadioGroup>
          </div>
        <div style="margin-top: 36px; height:40px; overflow: hidden;">
          <i-button style = "float:right; margin-right: 30px;"  type="primary" @click="okSel">{{ $t("devicesIndex.devOfflineAccessSure") }}</i-button>
          <i-button style = "float:right; margin-right: 30px;"  type="text" @click="okCenter">{{ $t("devicesCreate.devCreateCancel") }}</i-button>
        </div>
        <div slot="footer"></div>
    </Modal>

    <Modal
      v-model="showDeviceVersion"
      class="modelStyle"
      width = 740
      >
      <p slot="header" class="modelStyleTitle">
        <span style="margin-right:60px;">{{$t('devicesIndex.equipmentVersion')}}：{{itemInfo.apkInfo}}</span>
        <span>{{$t('devicesIndex.devTableserial')}}：{{itemInfo.sn}}</span>
      </p>
      <div class="adminList" >
        <Table
          ref="table1"
          class="list"
          :data="versionlist"
          :columns="versionColumns"
        />
      </div>
      <div slot="footer"></div>
    </Modal>
    <Modal
      footer-hide
      v-model="showPassPerson"
      class="modelPassPerson"
      width= 960
      @on-visible-change="changeStatus"
      @on-cancel="changeStatus1"
      >
      <p slot="header">
        <span class="left">{{$t('devicesCreate.devCreateType')}}：{{itemInfo.deviceType}}</span>
        <!-- <span>{{$t('devicesIndex.devTableserial')}}：{{itemInfo.sn}}</span> -->
        <span >{{$t('devicesIndex.passPerson')}}</span>
      </p>
      <div>
        <h1>
          {{lockageNum}}
          <!-- 12345 -->
        </h1>
      </div>
      <div slot="footer"></div>
    </Modal>
  </div>
</template>

<script>
import {
  getList,
  del,
  bindArea,
  upgrade,
  restart,
  reset,
  open,
  IDCard,
  lineAccess,
  openTime,
  selectDescList,
  upgradeVersion,
  getDeviceInfo
} from '@/api/device.js'
import pageMixin from '@/utils/mixins/pageMixin.js'

import Create from './Create'
import Create2 from './Create2'
import ListSettings from './ListSettings'
import ListSettings1 from './ListSettings1'
import AreaSelect from './AreaSelect'

export default {
  mixins: [
    pageMixin,
  ],
  components: {
    Create,
    Create2,
    AreaSelect,
  },
  computed: {
    btnShow () {
      return this.$store.state.btnShow
    },
  },

  watch: {
    btnShow(){
      this.timezones = [
        { name: this.$t('devicesCreate.devTimezone1'), value: '(UTC+08:00)' },
        { name: this.$t('devicesCreate.devTimezone5'), value: '(UTC+09:00)' },
        { name: this.$t('devicesCreate.devTimezone7'), value: '(UTC+04:00)' },
        { name: this.$t('devicesCreate.devTimezone8'), value: '(UTC+02:00)' },
        { name: this.$t('devicesCreate.devTimezone9'), value: '(UTC+03:00)' },
        { name: this.$t('devicesCreate.devTimezone12'), value: '(UTC+07:00)' },
        { name: this.$t('devicesCreate.devTimezone14'), value: '(UTC+05:30)' },
        { name: this.$t('devicesCreate.devTimezone18'), value: '(UTC+06:00)' },
        { name: this.$t('devicesCreate.devTimezone20'), value: '(UTC+05:00)' },
        { name: this.$t('devicesCreate.devTimezone22'), value: '(UTC-10:00)' },
        { name: this.$t('devicesCreate.devTimezone23'), value: '(UTC+05:45)' },
        { name: this.$t('devicesCreate.devTimezone25'), value: '(UTC+03:30)' },
        { name: this.$t('devicesCreate.devTimezone27'), value: '(UTC+08:30)' },
        { name: this.$t('devicesCreate.devTimezone28'), value: '(UTC+06:30)' },
        { name: this.$t('devicesCreate.devTimezone29'), value: '(UTC-05:00)' },
        { name: this.$t('devicesCreate.devTimezone33'), value: '(UTC+10:00)' },
        { name: this.$t('devicesCreate.devTimezone34'), value: '(UTC+01:00)' },
        { name: this.$t('devicesCreate.devTimezone38'), value: '(UTC+00:00)' },
        { name: this.$t('devicesCreate.devTimezone41'), value: '(UTC-06:00)' },
        { name: this.$t('devicesCreate.devTimezone47'), value: '(UTC-07:00)' },
        { name: this.$t('devicesCreate.devTimezone48'), value: '(UTC-02:00)' },
        { name: this.$t('devicesCreate.devTimezone50'), value: '(UTC+09:30)' },
        { name: this.$t('devicesCreate.devTimezone51'), value: '(UTC+08:45)' },
        { name: this.$t('devicesCreate.devTimezone52'), value: '(UTC-03:00)' },
      ]
    
      this.columns = [
        { type: 'selection', width: 70 },
        {
          type: 'index',
          width: 60,
          indexMethod: this.$_index_method,
        },
        {
          title: this.$t('devicesIndex.devTableserial'),
          key: 'sn',
        },
        {
          title: this.$t('devicesIndex.devTableName'),
          key: 'name',
        },
        {
          title: this.$t('versionIndex.verListVersion'),
          key: 'apkInfo',
          render (h, { row }) {
            let label = '-'
            if (row.apkInfo) {
              label = row.apkInfo
            }
            return h('div', label)
          },
        },
        


        {
          title: this.$t('devicesCreate.devCreateType'),
          key: 'deviceType',
        },
        {
          title: this.$t('devicesIndex.devTableproductType'),
          key: 'productId',
          render: (h, { row }) => {
            if (row.productId === 1) {
              return h('div',this.$t('devicesIndex.devTableMachine'))
            } else if (row.productId === 2) {
              return h('div', this.$t('devicesIndex.devTableGuard'))
            }
            return h('div', '-')
          },
        },
        {
          title: this.$t('newDevices.siteName'),
          key: 'areaName',
          render: (h, { row }) => {
            let label = row.areaName
            if (row.areaName=='新场所') {
              label = this.$t('title.newSite')
            }
            return h('div', label)
          },
        },
        {
          title: this.$t('devicesIndex.devTableOnLive'),
          key: 'isOnline',

          render: (h, { row }) => {
            if (row.isOnline === 0) {
              return h('div',this.$t('devicesIndex.devTableOnlineN'));
            } else if (row.isOnline === 1) {
              return h('div', this.$t('devicesIndex.devTableOnlineY'));
            }
              return h('div', '-');              
          
          },


        },

        {
          title: this.$t('devicesIndex.devTableOnPeople'),
          key: 'peopleCount',
          renderHeader: (h, params) => {
            return h('span', 
              [
                h('span', {
                  style: {
                    display: 'inline-block',
                    width: '140px',
                    cursor: 'pointer',
                    overflow: 'hidden',
                    whiteSpace: 'nowrap', 
                    textOverflow: 'ellipsis',
                  },
                  domProps: {
                    innerHTML:`${this.$t('devicesIndex.devTableOnPeople')}` ,
                    title: `${this.$t('devicesIndex.devTableOnPeople')}`,
                  },
              })
            ])
          },
          render (h, { row }) {
            let label = '-'
            if (row.peopleCount) {
              label = row.peopleCount
            }
            return h('div', label)
          },
        },
        {
          title: this.$t('devicesIndex.devTableoperation'),
          key: 'settings',
          width: 260,
          render: (h, { row }) => {
            return h(ListSettings, {
              props: { row ,allPermissions:this.allPermissions},
              on: {
                itemClick: (name) => this.handleSettingsClick(name, row),
              },
            })
          },
        },
      ];
      this.versionColumns=
      [
        {
          title: this.$t('versionIndex.verListVersion'),
          key: 'version',
        },
        {
          title: this.$t('devicesIndex.devTableName'),
          key: 'apkname',
        },
        {
          title: this.$t('devicesIndex.upgradeType'),
          key: 'deviceType',
          width: 120,
        },
        {
          title: this.$t('versionIndex.verCreateTime'),
          key: 'createTime',
          width: 200,
        },
        {
          title: this.$t('devicesIndex.devTableoperation'),
          key: 'settings',
          width: 120,
          render: (h, { row }) => {
            return h(ListSettings1, {
              props: { row },
              on: {
                itemClick: (name) => this.handleSettingsClick(name, row),
              },
            })
          },
        },
      ]
      return this.$store.state.btnShow
    }
  },

  data () {
    return {
      timeBox:null,
      showPassPerson:false,
      lockageNum:0,//设备通过人数
      itemInfo:{
        apkInfo:"",
        sn:""
      },// 當前設備信息
      showDeviceVersion:false,
      modalZone: false,
      itemZoon: '',
      timezone: '',
      timezones: [
        { name: this.$t('devicesCreate.devTimezone1'), value: '(UTC+08:00)' },
        { name: this.$t('devicesCreate.devTimezone5'), value: '(UTC+09:00)' },
        { name: this.$t('devicesCreate.devTimezone7'), value: '(UTC+04:00)' },
        { name: this.$t('devicesCreate.devTimezone8'), value: '(UTC+02:00)' },
        { name: this.$t('devicesCreate.devTimezone9'), value: '(UTC+03:00)' },
        { name: this.$t('devicesCreate.devTimezone12'), value: '(UTC+07:00)' },
        { name: this.$t('devicesCreate.devTimezone14'), value: '(UTC+05:30)' },
        { name: this.$t('devicesCreate.devTimezone18'), value: '(UTC+06:00)' },
        { name: this.$t('devicesCreate.devTimezone20'), value: '(UTC+05:00)' },
        { name: this.$t('devicesCreate.devTimezone22'), value: '(UTC-10:00)' },
        { name: this.$t('devicesCreate.devTimezone23'), value: '(UTC+05:45)' },
        { name: this.$t('devicesCreate.devTimezone25'), value: '(UTC+03:30)' },
        { name: this.$t('devicesCreate.devTimezone27'), value: '(UTC+08:30)' },
        { name: this.$t('devicesCreate.devTimezone28'), value: '(UTC+06:30)' },
        { name: this.$t('devicesCreate.devTimezone29'), value: '(UTC-05:00)' },
        { name: this.$t('devicesCreate.devTimezone33'), value: '(UTC+10:00)' },
        { name: this.$t('devicesCreate.devTimezone34'), value: '(UTC+01:00)' },
        { name: this.$t('devicesCreate.devTimezone38'), value: '(UTC+00:00)' },
        { name: this.$t('devicesCreate.devTimezone41'), value: '(UTC-06:00)' },
        { name: this.$t('devicesCreate.devTimezone47'), value: '(UTC-07:00)' },
        { name: this.$t('devicesCreate.devTimezone48'), value: '(UTC-02:00)' },
        { name: this.$t('devicesCreate.devTimezone50'), value: '(UTC+09:30)' },
        { name: this.$t('devicesCreate.devTimezone51'), value: '(UTC+08:45)' },
        { name: this.$t('devicesCreate.devTimezone52'), value: '(UTC-03:00)' },
      ],
      sn: '',
      name: '',
      sex: 0,
      sexs: [
        { name: this.$t('devicesIndex.devOfflineAccessNo'), value: 0 },
        { name: this.$t('devicesIndex.devOfflineAccessYes'), value: 1 },
      ],
      modalSel: false,

      selection: [],
      list: [],
      columns: [
        { type: 'selection', width: 70 },
        {
          type: 'index',
          width: 60,
          indexMethod: this.$_index_method,
        },
        {
          title: this.$t('devicesIndex.devTableserial'),
          key: 'sn',
        },
        {
          title: this.$t('devicesIndex.devTableName'),
          key: 'name',
        },
        {
          title: this.$t('versionIndex.verListVersion'),
          key: 'apkInfo',
          render (h, { row }) {
            let label = '-'
            if (row.apkInfo) {
              label = row.apkInfo
            }
            return h('div', label)
          },
        },
        {
          title: this.$t('devicesCreate.devCreateType'),
          key: 'deviceType',
        },
        {
          title: this.$t('devicesIndex.devTableproductType'),
          key: 'productId',
          render: (h, { row }) => {
            if (row.productId === 1) {
              return h('div', this.$t('devicesIndex.devTableMachine'))
            } else if (row.productId === 2) {
              return h('div', this.$t('devicesIndex.devTableGuard'))
            }
            return h('div', '-')
          },
        },
        {
          title: this.$t('newDevices.siteName'),
          key: 'areaName',
          render: (h, { row }) => {
            let label = row.areaName
            if (row.areaName=='新场所') {
              label = this.$t('title.newSite')
            }
            return h('div', label)
          },
        },
        {
          title: this.$t('devicesIndex.devTableOnLive'),
          key: 'isOnline',
          render: (h, { row }) => {
            if (row.isOnline === 0) {
              return h('div',this.$t('devicesIndex.devTableOnlineN'));
            } else if (row.isOnline === 1) {
              return h('div', this.$t('devicesIndex.devTableOnlineY'));
            }
            return h('div', '-')
          },
        },
        {
          title: this.$t('devicesIndex.devTableOnPeople'),
          key: 'peopleCount',
          renderHeader: (h, params) => {
            return h('span', 
              [
                h('span', {
                  style: {
                    display: 'inline-block',
                    width: '140px',
                    cursor: 'pointer',
                    overflow: 'hidden',
                    whiteSpace: 'nowrap', 
                    textOverflow: 'ellipsis',
                  },
                  domProps: {
                    innerHTML:`${this.$t('devicesIndex.devTableOnPeople')}` ,
                    title: `${this.$t('devicesIndex.devTableOnPeople')}`,
                  },
              })
            ])
          },
          render (h, { row }) {
            let label = '-'
            if (row.peopleCount) {
              label = row.peopleCount
            }
            return h('div', label)
          },
        },
        {
          title: this.$t('devicesIndex.devTableoperation'),
          key: 'settings',
          width: 200,
          render: (h, { row }) => {
            return h(ListSettings, {
              props: { row ,allPermissions:this.allPermissions},
              on: {
                itemClick: (name) => this.handleSettingsClick(name, row),
              },
            })
          },
        },
      ],
      ifD2Update:false,
      ifCreate: false,
      ifUpdate: false,
      editItem: null,
      ifSelectArea: false,
      areaSelectCallback: null,
      allPermissions:{
        devListEdit:false,
        devListRelieve:false,
        devListCut:false,
        devListrestart:false,
        devListDel:false,
        devTimezones:false,
        devOfflineHint:false,
        devUpgradeBtn:false,
        devBingBtn:false,
        restoreSetting:false,
      },
      // 设备版本号
      versionlist:[],
      versionlist1:{
        apkInfo:'',
        deviceType:'',
        sn:'',
        protocolVersion:'',
      },//当前选择的设备信息-升级专用
      versionColumns:[
        {
          title: this.$t('versionIndex.verListVersion'),
          key: 'version',
        },
        {
          title: this.$t('devicesIndex.devTableName'),
          key: 'apkname',
        },
        {
          title: this.$t('devicesIndex.upgradeType'),
          key: 'deviceType',
          width: 120,
        },
        {
          title: this.$t('versionIndex.verCreateTime'),
          key: 'createTime',
          width: 200,
        },
        {
          title: this.$t('devicesIndex.devTableoperation'),
          key: 'settings',
          width: 120,
          render: (h, { row }) => {
            return h(ListSettings1, {
              props: { row },
              on: {
                itemClick: (name) => this.handleSettingsClick(name, row),
              },
            })
          },
        },
      ],
    }
  },

  mounted () {
    this.$_page_update();
    // this.IDCard()
    this.getAllPermissions()
    clearInterval(this.timeBox)
  },

  methods: {
    getAllPermissions(){
      let da=JSON.parse(window.localStorage.getItem('logo'))||[]
      da.map(v => {
        if(v.permission=='#device'&&v.children){
          v.children.map(a=>{
            if(a.permission=='#devListEdit'&&a.checked==='true'){
              this.allPermissions.devListEdit=true
            }
            if(a.permission=='#devListRelieve'&&a.checked==='true'){
              this.allPermissions.devListRelieve=true
            }
            if(a.permission=='#devListCut'&&a.checked==='true'){
              this.allPermissions.devListCut=true
            }
            if(a.permission=='#devListrestart'&&a.checked==='true'){
              this.allPermissions.devListrestart=true
            }
            
            if(a.permission=='#devListDel'&&a.checked==='true'){
              this.allPermissions.devListDel=true
              console.log(' this.allPermissions.devListDel', a.permission=='#devListDel'&&a.checked==='true')
            }
            if(a.permission=='#devTimezones'&&a.checked==='true'){
              this.allPermissions.devTimezones=true
            }
            if(a.permission=='#devOfflineHint'&&a.checked==='true'){
              this.allPermissions.devOfflineHint=true
            }
            if(a.permission=='#devUpgradeBtn'&&a.checked==='true'){
              this.allPermissions.devUpgradeBtn=true
            }
            if(a.permission=='#devBingBtn'&&a.checked==='true'){
              this.allPermissions.devBingBtn=true
            }
            if(a.permission=='#restoreSetting'&&a.checked==='true'){
              this.allPermissions.restoreSetting=true
            }
          })
        }
      });
    },
    showCreate () {
      this.ifCreate = true
    },
    closeCreate (ifUpdated) {
      ifUpdated && this.$_page_update()
      this.ifCreate = false
    },

    showUpdate (item) {
      if(item.deviceType=="D2"){
        this.ifD2Update = true
      }else if(item.deviceType=="F800W"){
        this.ifUpdate = true
      }else if(item.deviceType=="D150W"){
        this.$Message.warning(this.$t('devicesIndex.noUpdate'))
      }
      else{
        this.$Message.warning(this.$t('devicesIndex.noUpdate'))
      }
      
      this.editItem = item
    },
    closeUpdate (ifUpdated) {
      console.log(ifUpdated)
      ifUpdated && this.$_page_update()
      this.ifUpdate = false
      this.ifD2Update = false
    },

    showAreaSelect (cb) {
      this.areaSelectCallback = cb
      console.log(this.areaSelectCallback)
      this.ifSelectArea = true
    },
    closeAreaSelect (ifUpdated) {
      console.log(ifUpdated)
      ifUpdated && this.$_page_update()
      this.ifSelectArea = false
    },

    handleSelection (selection = []) {
      // console.log(selection)
      this.selection = selection
    },
    handleSelectionAllStatus (status) {
      this.$refs.table.selectAll(status)
    },
    handleBindAreaMulti () {
      const nowIds = this.selection
      if (nowIds.length === 0) {
        this.$Message.warning(this.$t('devicesIndex.devStrSel'))
        return
      }
      // 显示区域选择
      console.log('yoyoyooy')
      this.showAreaSelect(async (areaIdSel) => {
      console.log('areaIdSel')

        const arr = nowIds.map(item => {
          return this.handleBind({
            deviceId: item.deviceId,
            areaId: areaIdSel,
            isBind: 1,
          })
        })
        console.log(arr)
        await Promise.all(arr)
      })
    },
    // handleBindArea (item) {
    //   const { areaId } = item
    //   if (!areaId) {
    //     // 显示区域选择
    //     this.showAreaSelect((areaIdSel) => {
    //       this.handleBind({
    //         deviceId: item.deviceId,
    //         areaId: areaIdSel,
    //         isBind: 1,
    //       })
    //     })
    //   } else {
    //     this.$Modal.confirm({
    //       title: this.$t('devicesIndex.devStrBindRemove'),
    //       content: this.$t('devicesIndex.devStrdelIsUre') + item.name + this.$t('devicesIndex.devStrdelIsNN'),
    //       onOk: async () => {
    //         this.handleBind({
    //           deviceId: item.deviceId,
    //           areaId,
    //           isBind: 0,
    //         })
    //       },
    //     })
    //   }
    // },
    handleBindArea (item) {
      const { areaId } = item
      if (!areaId) {
        // 显示区域选择
        this.showAreaSelect((areaIdSel) => {
          let arr=[]
          arr.push(
            {
              deviceId: item.deviceId,
              areaId: areaIdSel,
              isBind: 1,
            }
          )
          this.handleBind(arr)
        })
      } else {
        this.$Modal.confirm({
          title: this.$t('devicesIndex.devStrBindRemove'),
          content: this.$t('devicesIndex.devStrdelIsUre') + item.name + this.$t('devicesIndex.devStrdelIsNN'),
          onOk: async () => {
            let arr1=[]
            arr1.push(
              {
                deviceId: item.deviceId,
                areaId,
                isBind: 0,
              }
            )
            this.handleBind(arr1)
          },
        })
      }
    },
    handleupOffline () {
      const nowIds = this.selection
      if (nowIds.length === 0) {
        this.$Message.warning(this.$t('devicesIndex.devOfflineAccessSel'))
        return
      }
      this.modalSel = true
    },
    okCenter () {
      this.modalSel = false
    },
    okSel () {
      var that = this
      that.selection.forEach((item, index) => {
        that.handleLineAccess({
          sn: item.sn,
          needPhoto: that.sex,
        })
      })
    },
    handleUpgradeaMulti () {
      const nowIds = this.selection
      if (nowIds.length === 0) {
        this.$Message.warning(this.$t('devicesIndex.devStrSelupgrade'))
        return
      }else if(nowIds.length>1){
        this.$Message.warning(this.$t('devicesIndex.devStrSelupgrade1'))
        return
      }
      this.showDeviceVersion=true
      console.log(nowIds,nowIds[0].deviceType)
      this.itemInfo=nowIds[0]
      this.getSelectDescList(nowIds[0])
      // this.$Modal.confirm({
      //   title: this.$t('devicesIndex.devStrupgradeEquipment'),
      //   content: this.$t('devicesIndex.devStrupgradeEquipmentIs'),
      //   onOk: async () => {
      //     const arr = nowIds.map(item => {
      //       return this.handleUpgrade({
      //         sn: item.sn,
      //       })
      //     })
      //     await Promise.all(arr)
      //   },
      // })
    },
    async getSelectDescList (item) {
      // console.log(deviceType)
      const { success ,data} = await selectDescList({deviceType:item.deviceType,sn:item.sn,apkInfo:item.apkInfo})
      if (success) {
        console.log(data)
        this.versionlist=data.data
        if(data.data){
          this.versionlist1.deviceType=item.deviceType
          this.versionlist1.sn=item.sn
          this.versionlist1.apkInfo=item.apkInfo
          this.versionlist1.protocolVersion=item.protocolVersion
          console.log('getSelectDescList-this.versionlist',this.versionlist1)
        }
      } else {
        this.$Message.error(this.$t('staffIndex.stafferror'))
      }
    },
    handleRestart (item) {
      this.$Modal.confirm({
        title: this.$t('devicesIndex.devStrRestart'),
        content: this.$t('devicesIndex.devStrRestartIsNew') + item.name + this.$t('devicesIndex.devStrDelEquipmentIsNNew'),
        onOk: async () => {
          // const { success, data } = await restart({ sn: item.sn})
          const { success, data } = await restart({ sn: item.sn,protocolVersion:item.protocolVersion})
          if (success) {
            this.$Message.success(this.$t('devicesIndex.devStrRestarsUCC'))
            this.$_page_update()
          } else {
            this.$Message.error(data)
          }
        },
      })
    },

    handleOpen (item) {
      this.$Modal.confirm({
        title: this.$t('devicesIndex.devStrEquipmentName'),
        content: this.$t('devicesIndex.devStrEquipment') + item.name + this.$t('devicesIndex.devStrCutIs'),
        onOk: async () => {
          const { success, data } = await open({ sn: item.sn})
          if (success) {
            this.$Message.success(this.$t('devicesIndex.devStrCutSucc'))
            this.$_page_update()
          } else {
            this.$Message.error(data)
          }
        },
      })
    },
    handleTime (item) {
      this.$Modal.confirm({
        title: this.$t('devicesListSettings.devListTimeIs'),
        content: this.$t('devicesIndex.devStrEquipment') + item.name + this.$t('devicesListSettings.devListTimeIs'),
        onOk: async () => {
          const { success, data } = await openTime({ sn: item.sn })
          if (success) {
            this.$Message.success(this.$t('devicesListSettings.devListTimeSucc'))
            // this.$_page_update()
          } else {
            this.$Message.error(this.$t('devicesListSettings.devListTimeErr'))
          }
        },
      })
    },

    handleSettingsClick (name, row) {
      switch (name) {
        case 'edit':
          this.showUpdate(row)
          break
        case 'del':
          this.handleDel(row)
          break
        case 'bindArea':
          this.handleBindArea(row)
          break
        case 'restart':
          this.handleRestart(row)
          break
        case 'open':
          this.handleOpen(row)
          break
        case 'Time':
          this.handleTime(row)
          break
        case 'Timezone':
          this.handleZone(row)
          break
        case 'restoreSetting':
          this.restoreSetting(row)
          break
        case 'networkUpdate':
          this.networkUpdate(row)
          break
        case 'passPerson':
          this.passPerson(row)
          break
      }
    },
    handleZone (item) {
      this.timezone = item.timezone
      this.modalZone = true
      this.itemZoon = item
    },
    restoreSetting(item){
      this.$Modal.confirm({
        title: this.$t('devicesIndex.restoreSetting'),
        content: this.$t('devicesIndex.devOfflineAccessSure') + item.name + this.$t('devicesIndex.restoreSetting'),
        onOk: async () => {
          // const { success, data } = await reset({ sn: item.sn})
          const { success, data } = await reset({ sn: item.sn,protocolVersion: item.protocolVersion,})
          if (success) {
            this.$Message.success(this.$t('devicesIndex.restoreSetting')+this.$t('staffIndex.staffDepaUser2'))
            this.$_page_update()
          } else {
            this.$Message.error(data)
          }
        },
      })
    },
    async handleSubmitZone () {
      if (!this.timezone) {
        this.$Message.error(this.$t('devicesIndex.devtimezoneSel'))
        return
      }
      if (this.timezone == this.itemZoon.timezone) {
        this.$Message.error(this.$t('devicesIndex.devtimezoneNew'))
        return
      }
      const { success } = await openTime({
        sn: this.itemZoon.sn,
        timezone: this.timezone,
        deviceId: this.itemZoon.deviceId,
        protocolVersion: this.itemZoon.protocolVersion,
      })
      if (success) {
        this.$Message.success(this.$t('devicesIndex.devtimezoneNewSucc'))
        this.modalZone = false
        this.$_page_update()
      } else {
        this.$Message.error(this.$t('devicesIndex.devtimezoneNewErr'))
      }
    },

    async getData (query) {
      const { success, data } = await getList({
        page: query.page,
        limit: query.pageSize,

        sn: this.sn,
        name: this.name,
      })
      let list = []
      let page = 1
      let total = 0
      if (success) {
        list = data.data
        page = data.pageNum || 1
        total = Number(data.count)
      }
      this.list = list
      this.page = page
      this.pageSize = query.pageSize
      this.total = total
      this.selection = []
    },
    async handleDel (item) {
      this.$Modal.confirm({
        title: this.$t('devicesIndex.devStrDelEquipment'),
        content: this.$t('devicesIndex.devStrDelEquipmentIsNew') + item.name + this.$t('devicesIndex.devStrDelEquipmentIsNNew'),
        onOk: async () => {
          const { success } = await del({ deviceId: item.deviceId })
          if (success) {
            this.$Message.success(this.$t('devicesIndex.devStrDelEquipmentSucc'))
            this.$_page_update()
          } else {
            this.$Message.error(this.$t('devicesIndex.devdevStrDelEquipmentfailed'))
          }
        },
      })
    },
    async handleBind (params) {
      console.log('handleBind')
      const { success } = await bindArea(params)
      if (success) {
        this.$Message.success(this.$t('devicesIndex.devdevStrUpdateSucc'))
        this.$_page_update()
      } else {
        this.$Message.error(this.$t('devicesIndex.devdevStrUpdatefailed'))
      }
    },
    async handleUpgrade (params) {
      const { success, data } = await upgrade(params)
      if (success) {
        // console.log('handleUpgrade',data)
        this.$Message.success(this.$t('devicesIndex.devdevStrupgradeSucc'))
        this.$_page_update()
      } else {
        // console.log('handleUpgrade',data)
        if(data=='没有找到新的升级包'){
          this.$Message.error(this.$t('devicesIndex.devUpgradeBtnTip'))
        }else{
          this.$Message.error(this.$t('devicesIndex.devdevStrupgradeErr'))
        }
      }
    },
    async handleLineAccess (params) {
      const { success, data } = await lineAccess(params)
      if (success) {
        this.$Message.success(this.$t('devicesIndex.devOfflineAccessSucc'))
        this.modalSel = false
        this.$_page_update()
      } else {
        this.$Message.error(this.$t('devicesIndex.devOfflineAccessErr'))
      }
    },

    
    async IDCard (params) {
      const { success, data } = await IDCard({
        'OP-DEV': 1,
        'CMD-URL': 14,
      })
      if (success) {
       
      } else {
        this.$Message.error(data)
      }
    },
    async networkUpdate (params) {
      console.log('networkUpdate',params)
      let data1={}
      for (var key in params) {
        let v = params[key];
        // console.log('v',key,params,v,key!='_index')
        if(key==='_index'||key==='_rowKey'){

        }else{
          this.$set(data1,key,v)
        }
      }
      data1.deviceType=this.versionlist1.deviceType
      data1.sn=this.versionlist1.sn
      data1.apkInfo=this.versionlist1.apkInfo
      console.log('data1',data1,this.versionlist1)
      const { success, data } = await upgradeVersion(data1)
      if (success) {
        this.showDeviceVersion=false
        this.$_page_update()
        this.$Message.success(this.$t('devicesIndex.devdevStrupgradeSucc'))
      } else {
        
        if(data=="F800W升级版本不能低于当前版本"){
          this.$Message.error(this.$t('devicesIndex.devStrSelupgrade2'))
        }else{
          this.$Message.error(this.$t('devicesIndex.devdevStrupgradeErr'))
        }
      }
    },
    async passPerson (params) {
      var that=this
      console.log('passPerson',params)
      this.itemInfo=params
      // return
      let params1={
        sn:params.sn
      }
      this.showPassPerson=true
      this.timeBox=
      setInterval(() => {
        that.getDeviceInfo(params1)
      }, 3000);
    },
    async getDeviceInfo(params) {
      const { success, data } = await getDeviceInfo(params)
      if (success) {
        this.lockageNum=data.data.lockageNum
        // this.$Message.success(this.$t('devicesIndex.devdevStrupgradeSucc'))
      } else {
        this.$Message.error(this.$t('staffIndex.stafferror'))
      }
    },
    changeStatus(status){
      console.log('status',status)
      // clearInterval(this.timeBox)
    },
    changeStatus1(status){
      console.log('status1',status)
      clearInterval(this.timeBox)
    },
  },
}
</script>

<style lang="less" scoped>
.setting-area {
  .clearfix();

  .btns {
    float: right;
  }
  .title {
    line-height: @lh-base;
    font-size: 18px;
    font-weight: bold;
  }
  .modelStyleTitle{
    font-weight: bold;
    font-size: 16px;
  } 
}
.modelPassPerson{
  font-weight: bold;
  // width: 1000px;
  /deep/ .ivu-modal{
    top:50%;
    transform: translateY(-50%);
    // background-color: rgb(333,33,33);
    p{
      text-align: center;
      position: relative;
      height: 50px;
      line-height: 50px;
      font-size: 30px;
      .left{
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
      }
    }
    h1{
      height: 400px;
      font-size: 160px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: normal;
    }
    
  }
}
</style>
